<template>
  <div class="navtabs">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="breadCrumbItem in breadCrumbList" :key="breadCrumbItem.path">
        {{ breadCrumbItem.name }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  computed: {
    breadCrumbList() {
      return this.$route.matched
    }
  }
}
</script>

<style lang="scss" scoped>
.navtabs {
  // margin-left: 20px;
  // margin-top: 20px;
  position: absolute;
  top: 22px;
  left: 40px;

}

/* 不被选中时的颜色 */
.el-breadcrumb ::v-deep .el-breadcrumb__inner {
  color: black !important;
  // font-weight: 600 !important;
  font-family: "楷体";
  font-size: 18px;
}

/* 被选中时的颜色 */
.el-breadcrumb__item:last-child ::v-deep .el-breadcrumb__inner {
  color: black !important;
  // font-weight: 600 !important;
  font-family: "楷体";
  font-size: 18px;

}
</style>
